<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
  <head>
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" charset="utf-8"/>
	<link rel="stylesheet" href="resources/css/bootstrap.css" ></link>
	<link rel="stylesheet" href="resources/css/bootstrap-fileupload.css" ></link>
   	<link rel="stylesheet" href="resources/css/ui-lightness/jquery-ui-1.10.3.custom.css">
   	<link rel="stylesheet" href="resources/css/style.css">
   	<link rel="stylesheet" href="resources/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3kOYMhNbartGm75c_O2XioYUTnbiEsu4&sensor=true&libraries=drawing,places"></script>    
  	<script src="resources/js/model/AppController.js"></script>
    <script src="resources/js/model/Comment.js"></script>
    <script src="resources/js/model/User.js"></script>
    <script src="resources/js/model/Blog.js"></script>
    <script src="resources/js/model/Room.js"></script>    
    <script src="resources/js/model/Map.js"></script>
    <script src="resources/js/model/Node.js"></script> 
    <title>Concept Map</title>
  </head>
  <script src="resources/js/jquery-1.10.2.js"></script>
  <script src="resources/js/jquery-ui-1.10.3.custom.js"></script>
  <script type="text/javascript" src="resources/js/jquery.mousewheel-3.0.6.pack.js"></script>
  <script type="text/javascript" src="resources/js/jquery.fancybox.pack.js?v=2.1.5"></script>
  <script src="resources/js/bootstrap.min.js"></script>
  <script src="resources/js/bootstrap-fileupload.min.js"></script>
  <script type="text/javascript" src="resources/js/jquery.json-2.3.min.js"></script>
    <script type="text/javascript" src="/CoupledObjectWebServer/resources/js/sync.js"></script>
  <script type="text/javascript" src="resources/js/mxh7kqd.js"></script>
  <script src="resources/js/jquery.address-1.4.min.js"></script>
  <script src="resources/js/arbor.js"></script>
  <script src="resources/js/arbor-tween.js"></script>
  <script src="resources/js/arbor-graphics.js"></script>
  <script src="resources/js/site.js"></script>
   <body>
	<script>
	var app=new AppController();
	app.init();
	google.maps.event.addDomListener(window, 'load', initialize);
	$(document).ready(function(){
		$("#buttonI").click(function(){
			$("#panelI").toggle("slide");
		});
		$("#buttonD").click(function(){
		    var options = { direction: 'right' };
		    $('#panelD').toggle('slide', options,700);
		});
		$("#myPosition").click(function(){
			setMyPosition();
			/*
			var pos=app.user.myLocation.getPosition();
			if(confirm("Are you sure you want publish your position?")){
				app.currentRoom.publishMyPosition($("#userName").val(),pos.lat(),pos.lng());
			}else
				return;	        
			*/
		});
		$("#publish").click(function(){
			if($("#title").val()==''){
				alert("Please add a title.");
				return;
			}
			var files=[];
			var i=0;
			$('.files').each(function(){
				  files[i++]=$(this).find("img").attr("src");
				});
			if($("#blogId").val()=='circle')
				app.currentRoom.publishBlogCircle(files);
			else if($("#blogId").val()=='rectangle')
				app.currentRoom.publishBlogRectangle(files);
			else if($("#blogId").val()=='polyline')
				app.currentRoom.publishBlogPolyline(files);
			else if($("#blogId").val()=='polygon')
				app.currentRoom.publishBlogPolygon(files);
			else if($("#blogId").val()=='marker')
				app.currentRoom.publishBlog(files);
			$.ajax({
				type: "POST",
				url: "publish",
				data: "blogId=" +$("#blogId").val()+
				"&title="+$("#title").val()+
				"&userName="+$("#userName").val(),
				success: function(response){
				// we have the response
				//alert(response);
				},
				error: function(e){
				alert('Error: ' + e);
				}
			});
		});
		$("#delete").click(function(){
			if(confirm("Are you sure you want to delete this blog?")){
				app.currentRoom.deleteOverlay($("#blogId").val());
				resetField();
			}else
				return;
		});
		$("#addComment").click(function(){
			if($("#comment").val()==''){
				alert("Please add a comment.");
				return;
			}
			var time=getTime();
			app.currentRoom.addCommentRoom($('#blogId').val(),$('#comment').val(),$('#userName').val(),time);
			$('#comment').val('');
		});
		
		$("#addMedia").click(function(){
			$("#media").html($("#media").html()+
			"<div class='fileupload fileupload-new' data-provides='fileupload'>"+
			"<div class='fileupload-new thumbnail' style='width: 50px; height: 50px;'><img src='resources/images/font50x50.gif' /></div>"+
			  "<div id='preview' class='fileupload-preview fileupload-exists thumbnail files' style='width: 50px; height: 50px;'></div>"+
			  "<span class='btn btn-default btn-file'><span class='fileupload-new'>Select image</span><span class='fileupload-exists'>Change</span><input type='file' id='files' name='files[]'/></span>"+
			  "<a href='#' class='btn btn-default fileupload-exists' data-dismiss='fileupload'>Remove</a>"+
			"</div>");
		});
		$("#likeButton").click(function(){
			var blogId=$('#blogId').val();
			app.currentRoom.addLike(blogId);
			$("#likes").val(loadBlog(blogId).likes);
		});
		$("#dislikeButton").click(function(){
			var blogId=$('#blogId').val();
			app.currentRoom.addDislike(blogId);
			$("#dislikes").val(loadBlog(blogId).dislikes);
		});
		$("#search").click(function(){
			if($("#googleSearch").css("display")=='block'){
				$("#googleSearch").hide();
				$("#localSearch").show();
			}else{
				$("#googleSearch").show();
				$("#localSearch").hide();
				$("#matchingList").hide();
			}
		});
		$("#suitcase").click(function(){
			app.currentRoom.myBlogs($("#userName").val());
			$("#matchingList").show();
		});
		$("#doSearch").click(function(){
			if($("#txt").val()==''){
				alert("Please insert any text.");
				$("#matchingList").html("");
				return;
			}			
			app.currentRoom.doSearch($("#txt").val());
			$("#localSearch").show();
			$("#matchingList").show();
		});
		$("#buttonList").click(function(){
			alert("asd");
		});
		
		$(".fancybox").fancybox();
	});
	$(document).on('click','.close',function(){
	    $(this).parent().hide();
	});
	$(document).on('click','.buttonList',function(){
	    app.currentRoom.goToBlog($(this).val());
	});
	</script>
	<div id="arbor">		
	  	<canvas id="sitemap"></canvas> 
	</div>  
  </body>
</html>